<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <meta name=Keywords content="<%= htmlWebpackPlugin.options.keywords %>">
  <meta name=Description content="<%= htmlWebpackPlugin.options.description %>">
  <link rel="shortcut icon" href="//www.artup.com/img/logoMin.ico" type="images/x-icon" />
</head>
<body style="opacity:0;">
<div id="app">
  <unify-header></unify-header>
  <suspension class="suspend" ref="suspend" :show-height="showSuspensionHeight" @mouseleave="suspendPackUp">
    <div class="container">
      <div class="upper">
        <div class="wrapper">
          <label class="suspend-label">艺术框画</label>
          <label class="customization-item"
                 :class="{current:customizationItem==='border'}"
                 @mouseover="suspendPullDown('border')"
                 @click="suspendPullDown('border')">框型：{{!frameShowBool&&nowType?nowType.name:'未选择'}}</label>
          <label
            class="customization-item"
            :class="{current:!frameShowBool&&customizationItem==='size'}"
            @mouseover="suspendPullDown('size')"
            @click="suspendPullDown('size')">尺寸：{{!frameShowBool&&nowSize?nowSize.name:'未选择'}}</label>
          <button class="customization-btn" @click="startCustom">开始定制</button>
        </div>
      </div>
      <div class="under">
        <div class="wrapper" style="text-align:center;">
          <div class="suspend-color-item"
               v-show="customizationItem==='border'"
               v-for="(item,index) in frameTypeData"
               :style="{'background-image':'url('+picturePrefix+item.attr+')'}"
               :class="{active:!frameShowBool&&nowType&&nowType.code===item.code}"
               @click='updataTypeFn(index)'>
            <label>{{item.name}}</label>
          </div>
          <div class="suspend-size-item"
               v-show="customizationItem==='size'"
               v-for="(item,index) in frameSize"
               @click='updateSizeFn(index)'
               :class="{active:!frameShowBool&&nowSize&&item.code===nowSize.code}">{{item.name}}
          </div>
        </div>
      </div>
    </div>
  </suspension>
  <div class="framedPicutresSelect">
    <div class="SelectMin">
      <div class="minBox">
        <div class="frameLeft" v-show="!frameShowBool">
          <img :src="picturePrefix+previewImageUrl" alt="">
        </div>
        <div class="no-selected" v-show="frameShowBool"></div>
        <div class="frameRight">
          <h2>艺术框画</h2>
          <p>定制画芯，多种框型可选，满足你的个性需求，</p>
          <p>打造家居及办公空间的完美视觉体验。</p>
          <div class="frameStyle">
            <p>框形</p>
            <div class="frameImgShow">
              <ul>
                <li class="kuangAngle"
                    v-for='(frameType,index) in frameTypeData'
                    :class="{typeActive:!frameShowBool&&nowType&&nowType.code===frameType.code}"
                    @click='updataTypeFn(index)'>
                  <img :src="picturePrefix+frameType.attr" alt="">
                </li>
              </ul>
            </div>
            <div class="frameSize">
              <p>尺寸</p>
              <div class="sizeSelect">
                <ul>
                  <li @click='updateSizeFn(index)'
                      v-for='(item,index) in frameSize'
                      class="k1_Foot1size_click"
                      :class="{sizeActive:!frameShowBool&&nowSize&&item.code===nowSize.code}">{{item.code}}mm
                  </li>
                </ul>
              </div>
            </div>
            <h2 class="prices" :style="{opacity:price?1:0}">{{price}} RMB</h2>
            <div class="start" @click="startCustom">
              开始制定
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner-list" ref="showSuspensionFlag">
    <div class="banner-item first">
      <h3 class="title">ARTS AND CRAFTS</h3>
      <h4 class="subtitle">艺术和现代工艺的完美结合</h4>
    </div>
    <div class="banner-item second">
      <h3 class="title">MOUNTING</h3>
      <h4 class="subtitle">匠心手工装裱</h4>
      <h4 class="subtitle">打造专属于你的影像画廊</h4>
    </div>
    <div class="banner-item third">
      <h3 class="title">PROCESS QUALITY</h3>
      <h4 class="subtitle">引进日本制框工艺</h4>
      <h4 class="subtitle">全手工装裱 精益求精</h4>
    </div>
    <div class="banner-item fourth">
      <h3 class="title">WORLD IN FRAME</h3>
      <h4 class="subtitle">一框一世界</h4>
    </div>
  </div>
  <unify-footer></unify-footer>

</div>
</body>
</html>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-113376322-1"></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'UA-113376322-1')
</script>
